@charset "utf-8";
@import './variable.scss';

// 顶部背景色
@mixin head_bg_color () {
    @each $themename, $theme in $themes {
        [data-theme='#{$themename}'] & {
            background-color: map-get($map: $theme, $key: head-bg-color)
        }
    }
}

// 顶部字体色
@mixin head_color () {
    @each $themename, $theme in $themes {
        [data-theme='#{$themename}'] & {
            color: map-get($map: $theme, $key: head-color)
        }
    }
}

// 顶部二三维按钮背景色
@mixin head_btn_bg_color () {
    @each $themename, $theme in $themes {
        [data-theme='#{$themename}'] & {
            background-image: map-get($map: $theme, $key: head-btn-bg-color)
        }
    }
}

// 搜索框背景色
@mixin search_bg_color () {
    @each $themename, $theme in $themes {
        [data-theme='#{$themename}'] & {
            background-image: map-get($map: $theme, $key: search-bg-color)
        }
    }
}

// 搜索内容背景色
@mixin search_dialog_bg_color () {
    @each $themename, $theme in $themes {
        [data-theme='#{$themename}'] & {
            background-image: map-get($map: $theme, $key: search-dialog-bg-color)
        }
    }
}

// 导航弹框背景色
@mixin dialog_bg_color () {
    @each $themename, $theme in $themes {
        [data-theme='#{$themename}'] & {
            background-color: map-get($map: $theme, $key: dialog-bg-color)
        }
    }
}

// 文字激活颜色
@mixin active_color () {
    @each $themename, $theme in $themes {
        [data-theme='#{$themename}'] & {
            color: map-get($map: $theme, $key: active-color)
        }
    }
}

// rem转换
@function getRem ($px) {
    @return ($px / 100) * 1rem;
}

// 图片
@mixin bg_picture ($width, $height, $url) {
    display: block;
    width: getRem($width);
    height: getRem($height);
    background: url('~@/assets/images' + $url) no-repeat center;
    background-size: contain;
}